<template>
    <div class="sms-container">
        <el-form ref="smsLoginForm" :model="smsFormData" status-icon :rules="smsRules" label-width="120px"
            class="demo-smsFormData">
            <el-form-item label="手机号" prop="phone" class="captcha">
                <el-input v-model="smsFormData.phone" maxlength="11" />
                <span @click="sendSms">{{ desc }}</span>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input v-model="smsFormData.code" maxlength="5" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(smsLoginForm)">登入</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { reactive, ref, onUnmounted } from 'vue'
import { smsRules, useSubmitForm } from "../../composition/login/validate"
import * as api from "@/api/users";
import { ElMessage } from 'element-plus'
import { useUser } from "@/store/users";
import { ElLoading } from 'element-plus'
import { useRouter } from "vue-router"
let router = useRouter();
let userStore = useUser();
let validateSuccess = async () => {
    let loadingInstance = ElLoading.service({
        text: '正在登入...',
        background: 'rgba(0,0,0,.4)'
    })
    try {
        let res = await api.smsApi(smsFormData.code);
        loadingInstance.close()
        sessionStorage.setItem("myx-token", res.data.token);
        userStore.$patch({
            userInfo: res.data.userInfo
        });
        router.push("/")
    } catch (e) {
        console.log(e)
        loadingInstance.close()
    }
}
let validateFailed = () => {
    console.log('校验失败')
}
let submitForm = useSubmitForm(validateSuccess, validateFailed)
const smsLoginForm = ref()
const smsFormData = reactive({
    phone: "",
    code: ''
})
let desc = ref('点击发送')
let timeDownInterval = null;
let isClick = false;
let sendSms = async () => {
    if (!isClick) {
        try {
            let res = await api.getSmsCode(smsFormData.phone);
            ElMessage({
                message: '短信验证码发送成功',
                type: 'success',
            })
            timeDownInterval = timeDown(60, desc, '秒后发送', desc.value, () => {
                isClick = false
            })
        } catch (e) {
            isClick = false
            ElMessage({
                message: e,
                type: 'error',
            })
            return
        }
    }
    isClick = true;
    console.log('out', isClick)
}
let timeDown = (timer = 5, param, msg, endMsg, cb) => {
    let count = timer;
    param.value = (count + "").padStart(2, 0) + msg;
    let interval = setInterval(() => {
        count--
        if (count <= 0) {
            clearInterval(interval)
            param.value = endMsg
            cb && cb()
            return
        }
        param.value = (count + "").padStart(2, 0) + msg
    }, 1000)
    return interval
}
onUnmounted(() => {
    if (timeDownInterval) clearInterval(timeDownInterval)
})
</script>
<style scoped lang="scss">
.captcha {
    display: flex;

    :deep(.el-input) {
        width: 170px;
        border-right: none;

        .el-input__wrapper {
            border-radius: 5px 0 0 5px;
            box-shadow: none;
        }
    }

    span {
        height: 42px;
        background-color: #fff;
        display: inline-block;
        border-left: none;
        border-radius: 0 5px 5px 0;
        width: 32%;
        color: #666;
        font-size: 14px;
        font-weight: 900;
        line-height: 42px;
        cursor: pointer;
        text-decoration: underline;
    }
}

.el-form {
    padding-right: 50px;
    margin-left: -20px;

    :deep(.el-button--primary) {
        height: 40px;
        width: 250px;
        background: linear-gradient(90deg, #1596fb, #002dff)
    }
}

:deep(.el-form-item__label) {
    color: #fff;
    line-height: 40px
}

:deep(.el-input__inner) {
    height: 40px;
}
</style>